import 'package:boss/color_constant.dart';
import 'package:boss/main.dart';
import 'package:boss/models/store_type.dart';
import 'package:boss/textStyle/text_style.dart';
import 'package:boss/ui/widget/custom_tab.dart';
import 'package:boss/ui/widget/loader/loader.dart';
import 'package:boss/ui/widget/modal/modal.dart';
import 'package:hi_common/hi_common.dart';
import 'package:flutter/material.dart';
import 'package:async/async.dart';

Future<List<StoreType>> showStoreTypeModal(
  BuildContext context, {
  int defaultValue,
  ValueChanged<StoreType> onChanged,
}) {
  return showModal<List<StoreType>>(
    context,
    builder: (context) => _StoreTypeModal(
      defaultValue: defaultValue,
      onChanged: onChanged,
    ),
  );
}

class _StoreTypeModal extends StatefulWidget {
  final int defaultValue;
  final ValueChanged<StoreType> onChanged;

  const _StoreTypeModal({
    this.defaultValue,
    this.onChanged,
  });

  @override
  __StoreTypeModalState createState() => __StoreTypeModalState();
}

class __StoreTypeModalState extends State<_StoreTypeModal> {
  List<StoreType> storeTypes = [];
  int selectedId;

  @override
  void initState() {
    super.initState();

    selectedId = widget.defaultValue;
  }

  Future<Result<List<StoreType>>> _loadTask() async {
    try {
      var response = await api.queryStoreType();
      if (!response.successful()) {
        return Result.error(response.msg);
      }

      storeTypes = response.data;
      return Result.value(response.data);
    } catch (e) {
      return Result.error(e.toString());
    } finally {}
  }

  @override
  Widget build(BuildContext context) {
    return Loader<List<StoreType>>(
      loadTask: _loadTask,
      builder: (context) {
        return Container(
          width: 660.w,
          height: 520.w,
          padding: EdgeInsets.only(
            left: 20.w,
            right: 20.w,
            top: 40.w,
          ),
          child: CustomTab(
            tabs: ['门店种类'],
            isScrollable: false,
            tabViews: <Widget>[
              Container(
                margin: EdgeInsets.only(
                  top: 60.w,
                ),
                child: Wrap(
                  spacing: 20.w,
                  runSpacing: 20.w,
                  children: storeTypes
                      .map((item) => _Chip(
                            title: item.storeTypeName,
                            isSelected: item.storeTypeId == selectedId,
                            onTap: () {
                              setState(() {
                                selectedId = item.storeTypeId;
                              });
                              if (widget.onChanged != null) {
                                widget.onChanged(item);
                              }
                            },
                          ))
                      .toList(),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

class _Chip extends StatelessWidget {
  final bool isSelected;
  final String title;
  final VoidCallback onTap;

  const _Chip({
    Key key,
    this.isSelected = false,
    this.title,
    this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      behavior: HitTestBehavior.translucent,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container(
            height: 60.w,
            padding: EdgeInsets.symmetric(
              horizontal: 35.w,
            ),
            decoration: BoxDecoration(
              border: Border.all(
                color: isSelected ? ColorConstant.ff5770f6 : ColorConstant.ffcc,
                width: 1.px,
              ),
              borderRadius: BorderRadius.circular(30.w),
            ),
            alignment: Alignment.center,
            child: Text(
              title,
              style: isSelected ? TextStyleConstant().blue_28 : TextStyleConstant().normal_1_28,
            ),
          )
        ],
      ),
    );
  }
}
